<template> 
  <div class="app-container">
    <el-card class="filter-container" shadow="never">

    </el-card>
    <el-card class="operate-container" shadow="never">
    </el-card>
    <div class="table-container"></div>
    <el-card class="form-container">
      <h3 slot="header">添加商品</h3>
      <el-form :model="user" :rules="rules" ref="brandFrom" label-width="150px">
        <el-form-item label="用户编号：" prop="name">
          <el-input v-model="user.id"></el-input>
        </el-form-item>
        <el-form-item label="真实名称：">
          <el-input v-model="user.nickname"></el-input>
        </el-form-item>
        <el-form-item label="账号信息：" prop="logo">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('brandFrom')">提交</el-button>
          <el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
    const defaultBrand = {};

    export default {
        name: 'BrandDetail',
        // components: {SingleUpload},
        props: {
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                brand: Object.assign({}, defaultBrand),
                rules: {
                    name: [
                        {required: true, message: '请输入品牌名称', trigger: 'blur'},
                        {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                    ],
                    logo: [
                        {required: true, message: '请输入品牌logo', trigger: 'blur'}
                    ],
                    sort: [
                        {type: 'number', message: '排序必须为数字'}
                    ],
                }
            }
        },
        created() {
            if (this.isEdit) {
                getBrand(this.$route.query.id).then(response => {
                    this.user = response.data;
                });
            } else {
                this.user = Object.assign({}, defaultBrand);
            }
        },
        methods: {
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('是否提交数据', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            if (this.isEdit) {
                                updateBrand(this.$route.query.id, this.brand).then(response => {
                                    this.$refs[formName].resetFields();
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success',
                                        duration: 1000
                                    });
                                    this.$router.back();
                                });
                            } else {
                                createBrand(this.brand).then(response => {
                                    this.$refs[formName].resetFields();
                                    this.brand = Object.assign({}, defaultBrand);
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success',
                                        duration: 1000
                                    });
                                });
                            }
                        });

                    } else {
                        this.$message({
                            message: '验证失败',
                            type: 'error',
                            duration: 1000
                        });
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.brand = Object.assign({}, defaultBrand);
            }
        }
    }
</script>

<style>

</style>
